<template>
  <div class="home-page">
    <!-- 头部导航 -->
    <div class="my-nav">
      <van-tabs v-model="activeName"  @click="clickNav" >
        <van-tab v-for="item in list" :title="item.name" :key="item.id" :name="item.id">
        </van-tab>
      </van-tabs>
        <!-- :list="list" -->
        <!-- :activeName="activeName"    @update:activeName="activeName=$event" -->
      <HomeChannel
        :activeName.sync="activeName"
      >
      </HomeChannel>
    </div>
     <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <!-- 上拉刷新 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <HomeList :item="item" v-for="(item) in channlsList" :key="item.art_id"></HomeList>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// import axios from 'axios'
import { HomeDetails, UserChannel } from '@/api/user'
import HomeChannel from './HomeChannel.vue'

export default {
  components: { HomeChannel },

  name: 'HomePage',
  data () {
    return {
      activeName: 0,
      list: [],
      finished: false,
      loading: false,
      channel_id: '',
      timestamp: +new Date(),
      channlsList: [],
      // count: 0,
      isLoading: true

    }
  },
  // 获取头部列表
  async created () {
    const res = await UserChannel()
    // console.log(res)
    this.list = res.data.channels

    // console.log(res.data.channels[0].id)
    const ress = await HomeDetails({ channel_id: this.list[0].id, timestamp: this.timestamp })
    // console.log(ress)
    this.channlsList = ress.data.results
  },
  methods: {
    showPopup () {

    },

    // 下拉刷新
    async onRefresh () {
      const res = await HomeDetails({ channel_id: this.activeName, timestamp: this.timestamp })
      // console.log(res.data.results)
      setTimeout(() => {
        this.channlsList.unshift(...res.data.results)
        this.isLoading = false
        this.count++
      }, 500)

      // this.channlsList = res.data.results
    },
    async onLoad () {
      // 页面加载前获取首页内容 下拉刷新
      const res = await HomeDetails({ channel_id: this.channel_id, timestamp: this.timestamp })
      // console.log(res)
      this.loading = false
      if (res.data.pre_timestamp === null) {
        this.finished = true
      } else {
        this.channlsList.push(...res.data.results)
      }
    },
    // async onLoad () {
    //   const reslut = await HomeDetails({ channel_id: this.activeIndex, timestamp: Date.now() })
    //   this.article.push(...reslut.data.results)
    //   console.log(this.article)
    //   this.loading = false
    //   // console.log(res)
    // },

    async clickNav () {
      const res = await HomeDetails({ channel_id: this.activeName, timestamp: this.timestamp })
      // console.log(res.data.results)
      this.channlsList = res.data.results
    }
    // async onLoad () {

    // }
    // this.channlsList.push(...ress.data.results)
  }
}
</script>

<style lang="less" scoped>
.home-page {
   margin-bottom: 50px;
   margin-top: 45px;
  .my-nav {
    height: 44px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99;
    background: #fff;
  }
  .van-tabs {
    padding-right: 86px;

  }
  .van-tabs__wrap {
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
   }

  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
  .left-margin {
    margin-right: 15px;
  }
}
.van-popup {
  width: 100%;
  height: 100%;
  ::v-deep .van-popup__close-icon {
    font-size: 20px;
    right: 12px;
    top: 12px;
  }
}
.article-channel {
  margin-top: 44px;
   .head {
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    justify-items: center;
    padding-bottom: 12px;
    h3 {
      font-size: 16px;
      color: #333;
      margin: 0;
      small {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
    }
    .edit {
      float: right;
      height: 22px;
      width: 52px;
      line-height: 22px;
      text-align: center;
      color: #DE644B;
      border-radius: 11px;
      border: 1px solid #DE644B;
      font-size: 12px;
      &.active {
        color: #fff;
        background: #DE644B;
      }
    }
  }
  .body {
    padding: 0 6px 0 16px;
    a {
      display: inline-block;
      padding: 0 8px;
      font-size:14px;
      color: #3A3948;
      background: #F7F8FA;
      height: 36px;
      line-height: 36px;
      min-width: 78px;
      margin-right: 10px;
      margin-bottom: 12px;
      border-radius: 18px;
      text-align: center;

    }
  }
}
</style>
